

class Home2 {

    // 获取添加成员按钮组对象
    public addStuEl = document.querySelectorAll('.addStu') as NodeListOf<Element>
    // console.log(addStuEl);
    // 获取删除成员按钮组对象 
    public closeBtnEl = document.querySelectorAll('.close-btn') as NodeListOf<Element>
    // console.log(closeBtnEl);
    // 获取删除组按钮组对象
    public delGroupEl = document.querySelectorAll('.delGroup') as NodeListOf<Element>
    // console.log(delGroupEl);

    constructor() { }

    // 向当前组添加组员 params:[事件对象,循环dom的索引值]
    addStuHander(e: Event, index: number) {
        console.log(`点击了第 ${index + 1} 个元素`);
        console.log('当前点击的元素对象是', e.target);
        let stuName = prompt('请输入学生姓名')

        // 要求:添加dom元素 使用 createElement 和 appendChild 来完成
        // 友情提示：有可能用到以下语法
        // const snode =  e.target.closest('类名').querySelector('选择器')
        // 创建li标签
        var e1 = document.createElement('li') as HTMLLIElement;
        // 给li内部增加 html代码
        e1.innerHTML = `${stuName}<div class="close-btn"><span class="iconfont icon-close"></span>`;
        // 给li 标签增加class 
        e1.classList.add('stu-item');


        // 事件对象

        // type：表示事件的类型，例如 "click"、"keydown"、"input" 等。
        // console.log(e.type, 'e.type');
        (e1.querySelector('.close-btn') as HTMLLIElement).addEventListener('click', (e) => {
            console.log('删除成员');
            // 这里可以添加你想要的点击事件处理逻辑


            this.delStuHander(e, index)

        });

        console.log(e1);
        // 获取 当前组下的 ul 元素
        const et = e.target as Element
        const ulEl = (et.closest('.group') as HTMLDivElement).querySelector('ul') as HTMLUListElement
        ulEl.appendChild(e1);
        // console.log(ulEl);




        // children: 属性，返回一个类数组对象，包含父元素的所有子元素。
        // 新加dom需要从新添加事件监听

    }


    // 删除成员（已完善，可以参考）[事件对象,循环dom的索引值]
    delStuHander(e: Event, index: number) {
        // console.log(`点击了第 ${index + 1} 个元素`);
        // console.log('当前点击的元素对象是', e.target);

        // 匹配选择器的最近的祖先元素
        const snode = (e.target as Element).closest('.stu-item');
        // 这段代码首先检查 snode 是否存在，如果存在，就调用它的 remove() 方法来移除它。
        if (snode) {
            snode.remove(); // 使用 remove() 方法移除元素
        }
    }

    // 删除组
    delGroupHander(e: Event, index: number) {
        console.log(`点击了第 ${index + 1} 个元素`);
        console.log('当前点击的元素对象是', e.target);
        // 友情提示：和删除成员语法类似

        // 匹配选择器的最近的祖先元素
        const snode = (e.target as Element).closest('.group');
        // 这段代码首先检查 snode 是否存在，如果存在，就调用它的 remove() 方法来移除它。
        if (snode) {
            snode.remove(); // 使用 remove() 方法移除元素
        }


    }

    // 作业：
    // 1. 新增添加组操作

    public btnAddGroupEl = document.querySelector('.btn-addGroup') as HTMLButtonElement
    public stuInEl = document.querySelector('.stu-in') as HTMLDivElement

    addEventLister() {


        // 为每个元素添加点击监听器
        this.addStuEl.forEach((item, index: number) => {
            item.addEventListener('click', (e:Event) => {
                console.log('添加成员');
                // 这里可以添加你想要的点击事件处理逻辑
                this.addStuHander(e, index)

            });
        });

        // 为每个元素添加点击监听器
        this.closeBtnEl.forEach((item, index) => {
            item.addEventListener('click', (e) => {
                console.log('删除成员');
                // 这里可以添加你想要的点击事件处理逻辑


                this.delStuHander(e, index)

            });
        });

        // 为每个元素添加点击监听器
        this.delGroupEl.forEach((item, index: number) => {
            item.addEventListener('click', (e: Event) => {
                console.log('删除组');
                // 这里可以添加你想要的点击事件处理逻辑
                this.delGroupHander(e, index)

            });
        });

        this.btnAddGroupEl.addEventListener('click', (event) => {

            let divGroupEl1 = document.createElement('div');
            divGroupEl1.classList.add('group')

            let h3El1 = document.createElement('h3');
            h3El1.textContent = '第N组'

            let aEl1 = document.createElement('a');
            aEl1.innerHTML = '添加成员'
            aEl1.classList.add('addStu')
            aEl1.href = 'javascript:void(0)'
            aEl1.addEventListener('click', (e) => {
                console.log('添加成员');
                this.addStuHander(e, 0)

            });

            let aEl2 = document.createElement('a');
            aEl2.innerHTML = '删除组'
            aEl2.classList.add('delGroup')
            aEl2.href = 'javascript:void(0)'
            aEl2.addEventListener('click', (e) => {
                console.log('删除组');
                this.delGroupHander(e, 0)

            });

            h3El1.appendChild(aEl1)
            h3El1.appendChild(aEl2)
            divGroupEl1.appendChild(h3El1)
            let ulEl1 = document.createElement('ul');
            divGroupEl1.appendChild(ulEl1)



            this.stuInEl.appendChild(divGroupEl1)

        })


    }




}

export default Home2